<template>
  <div>
    <img class="logo" src="/static/images/component/logo.png"/>
    <text class="name">米莘婚恋</text>
    <text class="title">觅觅寻寻 唯期真心</text>
    <button class="authBtn" hover-class="none" open-type="getUserInfo" @getuserinfo="authSetUser">
      开启觅心之旅
    </button>
  </div>
</template>

<script>
  export default {
    name: "index",
    computed: {
      user() {
        return this.$store.state.user
      }
    },
    methods: {
      authSetUser(e) {
        if (e.mp.detail.userInfo) {
          var that = this;
          this.database.collection('user').add({
            // data 字段表示需新增的 JSON 数据
            data: {
              openid:that.user.openid,
              base:e.mp.detail.userInfo
            }
          }).then(res => {
            that.$store.commit('updateBaseInfo',e.mp.detail.userInfo);
            wx.navigateBack();
            })

        }

      }
    }, onShow() {
      wx.setNavigationBarTitle({title: '授权'})
    }
  }
</script>

<style scoped>
  .logo {
    position: absolute;
    top: 10vh;
    left: 27vw;
    width: 46vw;
    height: 46vw;
  }

  .name {
    position: absolute;
    top: 42vh;
    width: 100%;
    height: 5vh;
    font-size: 6vw;
    text-align: center;
    font-weight: 400;
    font-family: PingFang-SC;
    color: #FF3076;
  }

  .title {
    position: absolute;
    top: 50vh;
    width: 100%;
    height: 5vh;
    font-size: 5vh;
    text-align: center;
    font-family: Young;
    color: rgba(0, 0, 0, 0.8);
  }

  .authBtn {
    position: absolute;
    bottom: 10vh;
    width: 70%;
    left: 15%;
    font-size: 3vh;
    color: white;
    background-color: #FF3076;
  }
</style>
